<!--
//  CitySelectorViewController.swift
//  HealthMonitoring
//
//  Created by 珠海正杰 on 2018/8/7.
//  Copyright © 2018年 YTYanK. All rights reserved.
// -->

<!doctype html>
<!--<script type="text/javascript" src="newWXcharts.js"></script>-->
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>

<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0" />
	</head>

	<body>
		<h1>WebViewJavascriptBidge Dome</h1>
		<div id='buttons'></div>
		<div id='log'></div>

		<div>
			<input type="button" value="getBlogNameFromObjC" id="blogId" />
		</div>
		<div id="container" style="height: 400px; width: 500px;  ; margin-top: 50px;"></div>
		
		<script type="text/javascript">
			/**
			 *  echar图
			 */
			var dom = document.getElementById("container");
			var myChart = echarts.init(dom);
			var app = {};
			option = null;
			option = {
				tooltip: {
					formatter: "{a} <br/>{b} : {c}%"
				},
				toolbox: {
					feature: {
						restore: {},
						saveAsImage: {}
					}
				},
				series: [{
					name: "业务指标",
					type: 'gauge',
					detail: {
						formatter: '{value}%'
					},
					data: [{
						value: 50,
						name: "完成率"
					}]
				}]
			};
            alert("----king")
<!--            setInterval(function() {-->
<!--                option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;-->
<!--                myChart.setOption(option, true);-->
<!--            }, 2000);;-->
			if(option && typeof option === "object") {
				myChart.setOption(option, true);
			}
		</script>
		
	</body>
	<script>
		window.onerror = function(err) {
			self.log("window.onerror" + err)
		}
		/*这段代码是固定的，必须要放到js中*/
		function setupWebViewJavascriptBridge(callback) {
			if(window.WebViewJavascriptBridge) {
				return callback(WebViewJavascriptBridge);
			}
			if(window.WVJBCallbacks) {
				return window.WVJBCallbacks.push(callback);
			}
			window.WVJBCallbacks = [callback];
			var WVJBIframe = document.createElement('iframe');
			WVJBIframe.style.display = 'none';
			WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
			document.documentElement.appendChild(WVJBIframe);
			setTimeout(function() {
				document.documentElement.removeChild(WVJBIframe)
			}, 0)
		}

		/*与OC交互的所有JS方法都要放在此处注册，才能调用通过JS调用OC或者让OC调用这里的JS*/
		setupWebViewJavascriptBridge(function(bridge) {
			var uniqueId = 1
			function log(message, data) {
				var log = document.getElementById('log')
				var el = document.createElement('div')
				el.className = 'logLine'
				el.innerHTML = uniqueId++ + '. ' + message + ':<br/>' + JSON.stringify(data)
				if(log.children.length) {
					log.insertBefore(el, log.children[0])
				} else {
					log.appendChild(el)
				}

			}

			/* Initialize your app here */

			/*我们在这注册一个js调用OC的方法，不带参数，且不用ObjC端反馈结果给JS：打开本demo对应的博文*/
			bridge.registerHandler('openWebviewBridgeArticle', function() {
				log("openWebviewBridgeArticle was called with by ObjC")
			})
			/*JS给ObjC提供公开的API，在ObjC端可以手动调用JS的这个API。接收ObjC传过来的参数，且可以回调ObjC*/
			bridge.registerHandler('getUserInfos', function(data, responseCallback) {
				log("Get user information from ObjC: ", data)
				responseCallback({
					'userId': '123456',
					'blog': '标哥的技术博客'
				})
			})
			/*JS给ObjC提供公开的API，ObjC端通过注册，就可以在JS端调用此API时，得到回调。ObjC端可以在处理完成后，反馈给JS，这样写就是在载入页面完成时就先调用*/
			bridge.callHandler('getUserIdFromObjC', function(responseData) {
				log("JS给ObjC提供公开的API，ObjC端通过注册，就可以在JS端调用此API时，得到回调。ObjC端可以在处理完成后，反馈给JS，这样写就是在载入页面完成时就先调用:", responseData)
			})

			document.getElementById('blogId').onclick = function(e) {
				<!--  绑定方法          第一个参数：相互统一的方法名称, 第二个是传递到ios端的数据, 第三个是ios回调的内容      -->
<!--                bridge.callHandler('getBlogNameFromObjC', {-->
<!--                    'blogURL': 'http://www.henishuo.com'-->
<!--                }, function(response) {-->
<!--                    log('JS got response', response)-->
<!--                })-->
                    alert("dddddd---")
			}
		})
	</script>

</html>
